/**
 * 按钮组件SSR导出处理
 * 使用Vue SSR渲染按钮组件为HTML
 */

import { createSSRExporter } from '@/utils/componentSSRExporter';
import ButtonComponent from './index.vue';

// 创建基于SSR的导出处理器
export default createSSRExporter(ButtonComponent, {
  // 自定义脚本生成
  scriptGenerator(component, options = {}) {
    const { id, props = {} } = component;
    const datas = props.datas || {};
    
    // 如果没有定义点击处理函数，则返回空字符串
    if (!datas.clickHandler) {
      return '';
    }
    
    // 生成事件处理代码
    return `
// 按钮点击事件 - ${id}
document.getElementById("${id}").addEventListener("click", function(event) {
  ${datas.clickHandler}
});`;
  },
  
  // 自定义CSS生成
  cssGenerator(component, options = {}) {
    const { id, style = {}, props = {} } = component;
    const datas = props.datas || {};
    
    // 生成按钮特定的CSS
    if (datas.customStyles) {
      return `
/* 按钮 ${id} 的自定义样式 */
#${id} {
  /* 自定义样式 */
  ${datas.customStyles}
}`;
    }
    
    return '';
  },
  
  // 导出所需的资源
  resources: [
    { type: 'css', path: './element-ui.css' }, // Element UI样式
    { type: 'css', path: './custom-button.css' } // 自定义按钮样式
  ]
}); 